<template>
  <div class="Commodity_evaluation">
    <div class="header">
      <van-nav-bar title="商品评论" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
    </div>
    <div class="Commodity_evaluation_div">
      <div class="list" v-if="evaluationData.list&&evaluationData.list.length>0">
        <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
          finished-text="没有更多了"
        >
      <ul>
        <li v-for="(item,index) in evaluationData.list">
          <div class="Commodity_evaluation_head">
            <img :src="item.avatar"/>
            <p>{{item.nick_name}}</p>
          </div>
          <p class="Commodity_evaluation_con">{{item.create_time}}</p>
          <div style="width: 100%;">
            <p class="Commodity_evaluation_foot">{{item.content}}</p>
          </div>
        </li>
      </ul>
        </van-list>
      </div>
      <div class="empty" v-else>暂无数据</div>
    </div>
  </div>
</template>



<script>
  export default {
    name: 'Commodity_evaluation',

    data() {
      return {
        evaluationData:[],
        evaluationDataList:[],
        //下拉刷新
        isLoading: false,
        //上拉加载
        loading: false,
        finished: false,
        pageNum: 1,
        Id:this.$route.query.id
      };
    },
    watch: {

    },
    methods: {
      //  返回上一层
      onClickLeft() {
        this.$router.go(-1);
      },
      async onBottomLoaded() {
        //获取商品评论
        let params = {
          scenicSpotId:this.Id,
          pageNum: this.pageNum,
          pageSize:10,
        };
        const res = await this.$axios.post(this.$api.commodityEvaluationData, params);
        if (res.success) {
          if (this.loading) {
            this.evaluationDataList = this.evaluationDataList.concat(res.data.list);
            this.evaluationData = res.data;
            this.evaluationData.list = this.evaluationDataList;
            if (this.evaluationData.list.length >= this.evaluationData.total) {
              this.finished = true;
            } else {
              this.pageNum++;
            }
          } else {
            this.evaluationData = res.data;
            if (this.evaluationData.list.length >= this.evaluationData.total) {
              this.finished = true;
            }
          }
          this.isLoading = false;
          this.loading = false;
        } else {
          this.$toast(res.msg);
        }
      },
      //下拉刷新
      onRefresh() {
        this.onBottomLoaded()
      },
      //上拉加载
      onLoad() {
        if (this.evaluationData.list && this.evaluationData.list.length > 0) {
          this.onBottomLoaded();
        }
      },
    },
    mounted() {
      this.onBottomLoaded();
    }
  };
</script>
<style>
  .Commodity_evaluation{width: 100%;background-color: #f7f7f7;height: 100vh;}
  .Commodity_evaluation_div{width: 100%;padding-top: 0.46rem;}
  .Commodity_evaluation ul li{border-bottom: 0.05rem solid #f7f7f7;font-size: 0;background-color: #fff;}
  .Commodity_evaluation_head{width: 100%;overflow: hidden;}
  .Commodity_evaluation_head img{width:0.4rem;border-radius: 0.8rem;float: left;margin: 0.1rem 0 0 0.15rem;}
  .Commodity_evaluation_head p{width: 70%;border-radius: 0.8rem;float: left;padding-left: 5%;font-size: 0.14rem;padding-top: 0.19rem;}
  .Commodity_evaluation_con{padding-left: 0.15rem;font-size: 0.14rem;line-height: 0.4rem;color: gainsboro;}
  .Commodity_evaluation_foot{font-size: 0.14rem;padding: 0 0.15rem 0.1rem;word-wrap:break-word;word-break:break-all;overflow: hidden;}
  .County_agency_show{width: 100%;position: fixed;left: 0;    height: 100vh;background-color: rgba(0,0,0,.4);z-index: 120;top: 0;}
  .County_agency_show_div{background-color: #fff;top:30%;border-radius: .2rem;width: 60%;position: fixed;left:20%;}
  .County_agency_show_div img{width: 0.5rem;position: absolute;right: 0.2rem;top:0.2rem;}
  .County_agency_show_div p{font-size: 0.45rem;text-align: center;padding: 1.2rem 0 0.2rem;color:#000;}
  .County_agency_show_div_a{background-color: #01bf47;width: 3rem;text-align: center;margin: 0.2rem auto 1rem;border-radius: .2rem;line-height: 0.5rem;padding-bottom: 0.2rem;}
  .County_agency_show_div_a a{text-decoration: none;color: #fff;font-size: 0.4rem;}
  .small{width: 0.3rem;height: 0.3rem;border-radius: 1.8rem;border: 1px solid #01bf47;font-size: 0;    position: absolute;top: .2rem;left: 60%;background-color: #fff;z-index: 100;}
  .small span{color:#01bf47;font-size: 0.18rem;position: relative;top: 0.05rem;}
  .empty{
    width:100%;
    margin-top:.4rem;
    text-align: center;
    font-size:.16rem;
    color:#999999;
  }
</style>
